<template>
  <view class="app-container">
    <!-- 顶部国风Banner -->
    <!--    <view class="banner">
          <image src="/static/banner-genealogy.png" class="banner-img" mode="aspectFill" />
          <view class="banner-title">寻根溯源 敬祖祭宗</view>
          <button class="main-btn">点击寻根</button>
        </view>-->
    <!-- 查询区 -->
    <view class="search-bar-beauty">
      <view class="search-label">区域</view>
      <input
        v-model="searchSelectedAreaName"
        class="search-input"
        placeholder="请选择所在区域"
        readonly
        @click="showAreaPicker"
      />
      <view class="search-label">姓氏</view>
      <input
        v-model="queryParams.familyName"
        class="search-input"
        placeholder="请输入家谱名称"
        @confirm="handleQuery"
      />
      <button class="search-btn" @click="handleQuery">搜索</button>
    </view>
    <!-- 家谱列表 -->
    <view class="genealogy-list">
      <view
        v-for="item in pageData"
        :key="item.id"
        class="genealogy-card"
        @click="goToFamilyDetail(item)"
      >
        <view class="cover">
          <text class="cover-title">{{ item.familyName }}</text>
        </view>
        <view class="info">
          <view class="title">{{ item.familyName }}</view>
          <view class="desc">{{ item.mergerName }}</view>
          <view class="desc">创建时间：{{ item.createTime }}</view>
          <view class="desc main-color">{{ item.inheritor || "暂无" }}（族长）</view>
          <view class="desc">入谱人数: {{ item.count || "--" }}</view>
        </view>
      </view>
    </view>
    <!-- 区域选择器弹窗保留原有 -->
    <uni-popup v-if="areaPickerVisible" ref="areaPicker" type="bottom">
      <view class="picker-container">
        <view class="picker-header">
          <text class="picker-title">选择区域</text>
          <text class="picker-close" @click="closeAreaPicker">关闭</text>
        </view>
        <view class="picker-status">
          <text class="status-text">已选择: {{ getSelectedAreaText() }}</text>
        </view>
        <picker-view :value="areaPickerValue" class="picker-view" @change="onAreaPickerChange">
          <picker-view-column>
            <view v-for="item in provinceList" :key="item.areaCode" class="picker-item">
              {{ item.name }}
            </view>
            <view v-if="loadingProvince" class="picker-item picker-loading">加载中...</view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="item in cityList" :key="item.areaCode" class="picker-item">
              {{ item.name }}
            </view>
            <view v-if="loadingCity" class="picker-item picker-loading">加载中...</view>
            <view v-if="!loadingCity && cityList.length === 0" class="picker-item picker-empty">
              请先选择省份
            </view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="item in districtList" :key="item.areaCode" class="picker-item">
              {{ item.name }}
            </view>
            <view v-if="loadingDistrict" class="picker-item picker-loading">加载中...</view>
            <view
              v-if="!loadingDistrict && districtList.length === 0"
              class="picker-item picker-empty"
            >
              请先选择城市
            </view>
          </picker-view-column>
        </picker-view>
        <view class="picker-footer">
          <button class="btn btn-default" @click="closeAreaPicker">取消</button>
          <button class="btn btn-primary" @click="confirmAreaSelection">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import FamilyAPI from "@/api/genealogy/family";
import RegionAPI from "@/api/system/region";
import { useUserStore } from "@/store";

export default {
  name: "GenealogyIndex",
  data() {
    return {
      loading: false,
      removeIds: [],
      total: 0,
      pageData: [],
      queryParams: {
        familyName: "",
        pageNum: 1,
        pageSize: 10,
        type: "region",
        areaCode: null,
      },
      searchSelectedAreaName: "",

      // 区域选择器相关
      areaPickerValue: [0, 0, 0],
      provinceList: [],
      cityList: [],
      districtList: [],
      selectedProvince: null,
      selectedCity: null,
      selectedDistrict: null,
      areaPickerVisible: false,

      // 区域选择器加载状态
      loadingProvince: false,
      loadingCity: false,
      loadingDistrict: false,

      // 用户信息
      userFamilyId: null,
      baseFlag: null,

      // 弹窗相关
      showDetailPopup: false,
      currentFamily: null,
    };
  },

  computed: {
    isAllSelected() {
      return this.pageData.length > 0 && this.removeIds.length === this.pageData.length;
    },
  },

  mounted() {
    this.initUserInfo();
    this.handleQuery();
    this.loadProvinceList();
  },

  methods: {
    // 初始化用户信息
    initUserInfo() {
      const userStore = useUserStore();
      this.userFamilyId = userStore.userInfo.userFamilyId;
      this.baseFlag = userStore.userInfo.baseFlag;
    },

    // 查询家谱列表
    handleQuery() {
      this.loading = true;

      // 构建查询参数
      const queryData = {
        familyName: this.queryParams.familyName,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        areaCode: this.queryParams.areaCode,
      };

      // 根据类型决定是否包含区域过滤
      if (this.queryParams.type === "region" && this.queryParams.areaCode) {
        // 区域查询，添加区域代码
        queryData.areaCode = this.queryParams.areaCode;
      }

      FamilyAPI.getPage(queryData)
        .then((data) => {
          this.pageData = data.list;
          this.total = data.total;
        })
        .catch((error) => {
          console.error("查询家谱列表失败:", error);
          uni.showToast({
            title: "查询失败",
            icon: "none",
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 重置查询
    handleResetQuery() {
      this.queryParams = {
        familyName: "",
        pageNum: 1,
        pageSize: 10,
        type: "region",
        areaCode: 0,
      };
      this.searchSelectedAreaName = "";
      this.handleQuery();
    },

    // 选择变化
    handleSelectionChange(id) {
      const index = this.removeIds.indexOf(id);
      if (index > -1) {
        this.removeIds.splice(index, 1);
      } else {
        this.removeIds.push(id);
      }
    },

    // 全选
    handleSelectAll(e) {
      if (e.detail.value) {
        this.removeIds = this.pageData.map((item) => item.id);
      } else {
        this.removeIds = [];
      }
    },

    // 分页变化
    handlePageChange(page) {
      this.queryParams.pageNum = page;
      this.handleQuery();
    },

    // 加入家谱
    joinFamily(familyId) {
      const currentFamily = this.pageData.find((item) => item.id === familyId);

      if (!currentFamily) {
        uni.showToast({
          title: "家谱信息不存在",
          icon: "none",
        });
        return;
      }

      // 根据家谱状态智能跳转
      switch (true) {
        case currentFamily.activedStatus === 1:
          // 已加入状态 - 跳转到家谱详情页面
          this.handleViewFamily(familyId);
          break;

        case currentFamily.joinStatus === 1:
          // 等待入谱状态 - 跳转到支付确认页面
          this.handlePayment(familyId);
          break;

        case currentFamily.joinStatus === 0:
          // 审核中状态 - 显示审核提示
          this.handlePendingReview();
          break;

        case currentFamily.joinStatus === 2:
          // 被拒绝状态 - 重新申请
          this.handleRejectedApplication(familyId);
          break;

        default:
          // 未加入状态 - 选择加入方式
          this.handleNewApplication(familyId);
          break;
      }
    },

    // 跳转到家谱详情页
    goToFamilyDetail(item) {
      uni.navigateTo({
        url: `/pages/genealogy/detail?familyId=${item.id}`,
      });
    },

    // 查看家谱详情
    handleViewFamily(familyId) {
      uni.navigateTo({
        url: `/pages/genealogy/person/index?familyId=${familyId}`,
      });
    },

    // 处理支付确认
    handlePayment(familyId) {
      uni.navigateTo({
        url: `/pages/genealogy/payment?familyId=${familyId}`,
      });
    },

    // 处理审核中状态
    handlePendingReview() {
      uni.showModal({
        title: "申请审核中",
        content: "您的加入申请正在审核中，请耐心等待。审核结果将通过消息通知您。",
        showCancel: false,
        confirmText: "知道了",
      });
    },

    // 处理被拒绝的申请
    handleRejectedApplication(familyId) {
      uni.showModal({
        title: "申请被拒绝",
        content: "您的申请被拒绝，拒绝理由请查阅通知。是否重新申请？",
        confirmText: "重新申请",
        cancelText: "取消",
        success: (res) => {
          if (res.confirm) {
            this.handleNewApplication(familyId);
          }
        },
      });
    },

    // 处理新申请
    handleNewApplication(familyId) {
      uni.showActionSheet({
        title: "选择加入方式",
        itemList: ["填写家谱信息申请", "使用激活码快速加入"],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              // 填写家谱信息申请
              this.openJoinWebview(familyId);
              break;
            case 1:
              // 使用激活码快速加入
              this.openActivationWebview(familyId);
              break;
          }
        },
      });
    },

    // 打开申请加入webview
    openJoinWebview(familyId) {
      uni.navigateTo({
        url: `/pages/genealogy/join?familyId=${familyId}`,
        success: () => {
          console.log("跳转到申请加入页面:", familyId);
        },
        fail: (err) => {
          console.error("跳转失败:", err);
          uni.showToast({
            title: "页面跳转失败",
            icon: "none",
          });
        },
      });
    },

    // 打开激活码webview
    openActivationWebview(familyId) {
      uni.navigateTo({
        url: `/pages/genealogy/activation?familyId=${familyId}`,
        success: () => {
          console.log("跳转到激活码页面:", familyId);
        },
        fail: (err) => {
          console.error("跳转失败:", err);
          uni.showToast({
            title: "页面跳转失败",
            icon: "none",
          });
        },
      });
    },

    // 获取加入按钮样式
    getJoinButtonClass(item) {
      if (item.activedStatus === 1) return "btn-success";
      if (item.joinStatus === 1) return "btn-info";
      if (item.joinStatus === 0) return "btn-warning";
      if (item.joinStatus === 2) return "btn-danger";
      return "btn-primary";
    },

    // 获取加入按钮文本
    getJoinButtonText(item) {
      if (item.activedStatus === 1) return "查看家谱";
      if (item.joinStatus === 1) return "等待入谱";
      if (item.joinStatus === 0) return "审核中";
      if (item.joinStatus === 2) return "被拒绝";
      return "加入家谱";
    },

    // 获取按钮提示信息
    getButtonTooltip(item) {
      if (item.activedStatus === 1) return "点击查看家谱详情";
      if (item.joinStatus === 1) return "点击确认入谱并消耗指标";
      if (item.joinStatus === 0) return "申请正在审核中，请耐心等待";
      if (item.joinStatus === 2) return "申请被拒绝，点击重新申请";
      return "点击选择加入方式";
    },

    // 获取状态图标
    getStatusIcon(item) {
      if (item.activedStatus === 1) return "&#xe600;"; // 查看家谱图标
      if (item.joinStatus === 1) return "&#xe601;"; // 等待入谱图标
      if (item.joinStatus === 0) return "&#xe602;"; // 审核中图标
      if (item.joinStatus === 2) return "&#xe603;"; // 被拒绝图标
      return "&#xe604;"; // 加入家谱图标
    },

    // 打开编辑对话框
    handleOpenDialog(id) {
      uni.navigateTo({
        url: `/pages/genealogy/edit?id=${id || ""}`,
      });
    },

    // 打开修缮家谱
    handleOpenDialog1(id) {
      uni.navigateTo({
        url: `/pages/genealogy/person/index?familyId=${id}`,
      });
    },

    // 删除家谱
    handleDelete(id) {
      const ids = id || this.removeIds.join(",");
      if (!ids) {
        uni.showToast({
          title: "请勾选删除项",
          icon: "none",
        });
        return;
      }

      uni.showModal({
        title: "警告",
        content: "确认删除已选中的数据项?",
        success: (res) => {
          if (res.confirm) {
            this.loading = true;
            FamilyAPI.deleteByIds(ids)
              .then(() => {
                uni.showToast({
                  title: "删除成功",
                  icon: "success",
                });
                this.handleResetQuery();
              })
              .finally(() => {
                this.loading = false;
              });
          }
        },
      });
    },

    // 显示区域选择器
    showAreaPicker() {
      this.areaPickerVisible = true;
    },

    // 关闭区域选择器
    closeAreaPicker() {
      this.areaPickerVisible = false;
    },

    // 区域选择器变化
    onAreaPickerChange(e) {
      const values = e.detail.value;

      // 判断省份是否变化
      if (values[0] !== this.areaPickerValue[0]) {
        // 省份变了，重置市和区，并加载新的城市列表
        this.areaPickerValue = [values[0], 0, 0];
        this.cityList = []; // 清空城市列表
        this.districtList = []; // 清空区县列表
        this.loadCityList(values[0]);
      } else if (values[1] !== this.areaPickerValue[1]) {
        // 市变了，重置区，并加载新的区县列表
        this.areaPickerValue = [values[0], values[1], 0];
        this.districtList = []; // 清空区县列表
        this.loadDistrictList(values[0], values[1]);
      } else {
        // 只区变了，直接更新选择值
        this.areaPickerValue = values;
      }
    },

    // 确认区域选择
    confirmAreaSelection() {
      const province = this.provinceList[this.areaPickerValue[0]];
      const city = this.cityList[this.areaPickerValue[1]];
      const district = this.districtList[this.areaPickerValue[2]];

      // 检查是否完整选择了省市区
      if (!province) {
        uni.showToast({
          title: "请选择省份",
          icon: "none",
        });
        return;
      }

      if (!city) {
        uni.showToast({
          title: "请选择城市",
          icon: "none",
        });
        return;
      }

      if (!district) {
        uni.showToast({
          title: "请选择区县",
          icon: "none",
        });
        return;
      }

      // 设置查询参数
      this.queryParams.areaCode = district.areaCode;
      this.searchSelectedAreaName = `${province.name} - ${city.name} - ${district.name}`;
      this.closeAreaPicker();
      this.handleQuery();
    },

    // 加载省份列表
    loadProvinceList() {
      this.loadingProvince = true;
      RegionAPI.getOptions({ type: 0, areaCode: 0 })
        .then((data) => {
          this.provinceList = data;
          this.areaPickerValue = [0, 0, 0];
          this.cityList = []; // 初始化时清空城市列表
          this.districtList = []; // 初始化时清空区县列表

          if (data.length > 0) {
            // 加载第一个省份的城市列表
            this.loadCityList(0);
          }
        })
        .catch((error) => {
          console.error("加载省份列表失败:", error);
          uni.showToast({
            title: "加载省份列表失败",
            icon: "none",
          });
        })
        .finally(() => {
          this.loadingProvince = false;
        });
    },

    // 加载城市列表
    loadCityList(provinceIndex) {
      this.loadingCity = true;
      const province = this.provinceList[provinceIndex];
      if (province) {
        RegionAPI.getOptions({ type: 1, areaCode: province.areaCode })
          .then((data) => {
            this.cityList = data;
            this.areaPickerValue[1] = 0;
            this.areaPickerValue[2] = 0;
            this.districtList = []; // 清空区县列表

            if (data.length > 0) {
              // 加载第一个城市的区县列表
              this.loadDistrictList(provinceIndex, 0);
            }
          })
          .catch((error) => {
            console.error("加载城市列表失败:", error);
            uni.showToast({
              title: "加载城市列表失败",
              icon: "none",
            });
          })
          .finally(() => {
            this.loadingCity = false;
          });
      } else {
        this.cityList = [];
        this.districtList = [];
      }
    },

    // 加载区县列表
    loadDistrictList(provinceIndex, cityIndex) {
      this.loadingDistrict = true;
      const city = this.cityList[cityIndex];
      if (city) {
        RegionAPI.getOptions({ type: 2, areaCode: city.areaCode })
          .then((data) => {
            this.districtList = data;
            this.areaPickerValue[2] = 0;
          })
          .catch((error) => {
            console.error("加载区县列表失败:", error);
            uni.showToast({
              title: "加载区县列表失败",
              icon: "none",
            });
          })
          .finally(() => {
            this.loadingDistrict = false;
          });
      } else {
        this.districtList = [];
      }
    },

    // 获取已选择区域的文本
    getSelectedAreaText() {
      const province = this.provinceList[this.areaPickerValue[0]];
      const city = this.cityList[this.areaPickerValue[1]];
      const district = this.districtList[this.areaPickerValue[2]];

      if (!province) return "请选择区域";
      if (!city) return `${province.name} - 请选择城市`;
      if (!district) return `${province.name} - ${city.name} - 请选择区县`;
      return `${province.name} - ${city.name} - ${district.name}`;
    },
  },
};
</script>

<style scoped>
.app-container {
  background: #f5e9da;
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.banner {
  position: relative;
  background: #fff;
  border-radius: 0 0 32rpx 32rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(233, 93, 42, 0.08);
  text-align: center;
  padding-bottom: 30rpx;
}
.banner-img {
  width: 100%;
  height: 220rpx;
  object-fit: cover;
}
.banner-title {
  font-size: 40rpx;
  color: #e95d2a;
  font-weight: bold;
  margin-top: -60rpx;
  margin-bottom: 20rpx;
  text-shadow: 0 2rpx 8rpx #fff;
}
.main-btn {
  background: #e95d2a;
  color: #fff;
  border-radius: 32rpx;
  font-size: 32rpx;
  padding: 18rpx 0;
  width: 70%;
  margin: 0 auto;
  box-shadow: 0 2rpx 8rpx rgba(233, 93, 42, 0.15);
}
.search-card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.08);
  margin: 30rpx 20rpx;
  padding: 30rpx 20rpx 20rpx 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.form-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.label {
  font-size: 30rpx;
  color: #bfa36b;
  font-weight: bold;
  min-width: 80rpx;
}
.input {
  flex: 1;
  border: 2rpx solid #e95d2a;
  border-radius: 16rpx;
  background: #fdf6ec;
  font-size: 30rpx;
  padding: 16rpx;
  color: #333;
}
.genealogy-list {
  margin: 0 20rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}
.genealogy-card {
  display: flex;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.genealogy-card:hover {
  box-shadow: 0 6rpx 24rpx rgba(233, 93, 42, 0.18);
  transform: translateY(-4rpx) scale(1.02);
}
.cover {
  width: 120rpx;
  background: linear-gradient(180deg, #e95d2a 0%, #f5e9da 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-title {
  color: #fff;
  font-size: 32rpx;
  writing-mode: vertical-rl;
  font-weight: bold;
  letter-spacing: 2rpx;
}
.info {
  flex: 1;
  padding: 20rpx 24rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}
.title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}
.desc {
  font-size: 26rpx;
  color: #666;
}
.main-color {
  color: #e95d2a;
  font-weight: bold;
}
.app-container {
  padding: 40rpx 0 0 0;
  background: linear-gradient(135deg, #f5faff 0%, #eaf6ff 100%);
  min-height: 100vh;
}

.search-bar {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(64, 158, 255, 0.1);
  padding: 40rpx 30rpx 30rpx 30rpx;
  margin-bottom: 30rpx;
}

.area-selector {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.area-input-highlight {
  border: 2rpx solid #409eff;
  background: #f0f7ff;
  color: #409eff;
  font-weight: bold;
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.label {
  min-width: 120rpx;
  font-size: 30rpx;
  color: #333;
  font-weight: 600;
}

.radio-group {
  display: flex;
  gap: 10rpx;
}

.radio-button {
  padding: 10rpx 24rpx;
  border: 2rpx solid #ddd;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #666;
  transition: all 0.2s;
}

.radio-button.active {
  background-color: #409eff;
  color: #fff;
  border-color: #409eff;
}

.input {
  flex: 1;
  padding: 18rpx;
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
  font-size: 30rpx;
  background: #f9f9f9;
}

.form-actions {
  display: flex;
  gap: 30rpx;
  justify-content: center;
  margin-top: 20rpx;
}

.btn {
  padding: 18rpx 40rpx;
  border-radius: 10rpx;
  font-size: 30rpx;
  border: none;
  transition: box-shadow 0.2s;
}

.btn-primary {
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.15);
}

.btn-success {
  background: linear-gradient(90deg, #67c23a 0%, #95d475 100%);
  color: #fff;
}

.btn-danger {
  background: linear-gradient(90deg, #f56c6c 0%, #f89898 100%);
  color: #fff;
}

.btn-default {
  background: #fff;
  color: #409eff;
  border: 2rpx solid #409eff;
}

.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.family-list {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.list-header {
  display: flex;
  gap: 30rpx;
  margin-bottom: 30rpx;
}

.table-container {
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  border: none;
}

.table-header {
  display: flex;
  background: #f0f7ff;
  border-bottom: 2rpx solid #eee;
}

.table-row {
  display: flex;
  border-bottom: 2rpx solid #f5f5f5;
  transition: background 0.2s;
}

.table-row:hover {
  background: #eaf6ff;
}

.table-row:last-child {
  border-bottom: none;
}

.th,
.td {
  padding: 22rpx 10rpx;
  font-size: 28rpx;
  text-align: center;
  flex: 1;
  min-width: 0;
  word-break: break-all;
}

.th {
  font-weight: bold;
  color: #333;
}

.td {
  color: #666;
}

.checkbox {
  flex: 0 0 80rpx;
}

.actions {
  margin-top: 16rpx;
  text-align: right;
}
.join-btn {
  background: #e95d2a;
  color: #fff;
  border-radius: 24rpx;
  font-size: 26rpx;
  padding: 10rpx 32rpx;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(233, 93, 42, 0.1);
}
.join-btn:active {
  background: #c94c1e;
}

.btn-link {
  background: none;
  border: none;
  font-size: 26rpx;
  padding: 8rpx 14rpx;
  border-radius: 6rpx;
  transition: background 0.2s;
}

.btn-link.btn-primary {
  color: #409eff;
}

.btn-link.btn-success {
  color: #67c23a;
}

.btn-link.btn-danger {
  color: #f56c6c;
}

.btn-link.btn-info {
  color: #909399;
}

.btn-link.btn-warning {
  color: #e6a23c;
}

.btn-link:hover {
  background: #f0f7ff;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40rpx;
  margin-top: 40rpx;
}

.page-info {
  font-size: 30rpx;
  color: #409eff;
  font-weight: bold;
}

.picker-container {
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  padding: 40rpx 30rpx 30rpx 30rpx;
  box-shadow: 0 -4rpx 24rpx rgba(64, 158, 255, 0.1);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #eee;
  margin-bottom: 20rpx;
}

.picker-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #409eff;
}

.picker-close {
  font-size: 30rpx;
  color: #909399;
}

.picker-status {
  margin-bottom: 20rpx;
  padding: 10rpx 0;
  border-bottom: 2rpx solid #eee;
}

.status-text {
  font-size: 28rpx;
  color: #666;
}

.picker-view {
  height: 420rpx;
}

.picker-item {
  line-height: 90rpx;
  text-align: center;
  font-size: 30rpx;
}

.picker-empty {
  color: #909399;
  font-size: 30rpx;
}

.picker-loading {
  color: #909399;
  font-size: 30rpx;
}

.picker-loading::after {
  content: "";
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  border: 2rpx solid #409eff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
  margin-left: 10rpx;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.picker-footer {
  margin-top: 30rpx;
  text-align: center;
  display: flex;
  justify-content: space-around;
  gap: 30rpx;
}

.family-detail-popup {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx 30rpx 30rpx 30rpx;
  width: 540rpx;
  box-shadow: 0 4rpx 24rpx rgba(191, 163, 107, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.popup-close-btn {
  position: absolute;
  right: 24rpx;
  top: 18rpx;
  font-size: 40rpx;
  color: #bbb;
  z-index: 2;
  cursor: pointer;
}
.popup-cover {
  width: 180rpx;
  height: 220rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  object-fit: cover;
  background: #f5e9da;
}
.popup-info {
  width: 100%;
  margin-bottom: 24rpx;
}
.popup-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  text-align: center;
}
.popup-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 6rpx;
  text-align: center;
}
.popup-join-btn {
  background: #e95d2a;
  color: #fff;
  border-radius: 24rpx;
  font-size: 28rpx;
  padding: 14rpx 0;
  width: 80%;
  margin: 0 auto;
  box-shadow: 0 2rpx 8rpx rgba(233, 93, 42, 0.1);
}
.search-bar-beauty {
  display: flex;
  align-items: center;
  gap: 18rpx;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.08);
  padding: 18rpx 24rpx;
  margin: 30rpx 20rpx 20rpx 20rpx;
  flex-wrap: wrap;
}
.search-label {
  font-size: 24rpx;
  color: #bfa36b;
  margin-right: 6rpx;
  min-width: 48rpx;
}
.search-input {
  border: 1.5rpx solid #e0e0e0;
  border-radius: 12rpx;
  background: #f7fafd;
  font-size: 26rpx;
  padding: 10rpx 18rpx;
  color: #333;
  min-width: 120rpx;
  max-width: 220rpx;
  box-shadow: 0 1rpx 4rpx rgba(64, 158, 255, 0.04);
  margin-right: 8rpx;
}
.search-btn {
  background: linear-gradient(90deg, #e95d2a 0%, #ffb980 100%);
  color: #fff;
  border-radius: 12rpx;
  font-size: 22rpx;
  padding: 0 22rpx;
  height: 44rpx;
  min-width: 60rpx;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(233, 93, 42, 0.1);
  transition: background 0.2s;
}
.search-btn:active,
.search-btn:hover {
  background: linear-gradient(90deg, #c94c1e 0%, #e95d2a 100%);
}
</style>
